<template>
  <div>
    <van-checkbox-group v-model="result">
      <van-checkbox
        :name="item.id"
        v-for="item in cartList"
        @click="chxClickFn(item)"
        :key="item.id"
      >
        <van-card
          :num="item.number"
          :price="item.retail_price"
          :title="item.goods_name"
          :thumb="item.list_pic_url"
        />
      </van-checkbox>
    </van-checkbox-group>

    <van-submit-bar :price="price" button-text="提交订单" @submit="onSubmit">
      <van-checkbox v-model="checkedAll">全选</van-checkbox>
      <template #tip>
        你的收货地址不支持同城送, <span>修改地址</span>
      </template>
    </van-submit-bar>
  </div>
</template>

<script>
import { GetCartData } from "@/https/http";
export default {
  data() {
    return {
      price: 0,
      result: [],
      cartList: [],
    };
  },
  components: {},
  computed: {
    checkedAll: {
      get() {
        return this.result.length == this.cartList.length;
      },
      set(val) {
        if (val) {
          this.result = this.cartList.map((item) => item.id);
          this.price = 0;
          this.cartList.map(
            (item) => (this.price += item.number * item.retail_price * 100)
          );
        } else {
          this.result = [];
          this.price = 0;
        }
      },
    },
  },
  created() {
    GetCartData().then((res) => {
      if (res.errno == 0) {
        let { cartList } = res.data;
        this.cartList = cartList;
      }
    });
  },
  methods: {
    chxClickFn(item) {
      if (this.result.includes(item.id)) {
        this.price += item.number * item.retail_price * 100;
      } else {
        this.price -= item.number * item.retail_price * 100;
      }
    },
    onSubmit() {
      this.$toast.success("跳转支付");
    },
  },
};
</script>
 
<style lang="less" scoped>
.van-submit-bar {
  bottom: 50px;
}
/deep/.van-checkbox__label {
  width: 100%;
}
</style>